<template>
    <view class="content">
        <view class="main">
            <view class="avatar-box">
                <view class="box">
                    <button open-type="chooseAvatar" hover-class="button-hover" @chooseavatar="onChooseavatar"
                        style="width: 100%;height: 100%;">
                        <image :src="state.info.avatar" mode="scaleToFill" class="avatar" />
                    </button>
                </view>
            </view>
            <up-cell-group>
                <up-cell title="昵称">
                    <template #right-icon>
                        <!-- <up-switch v-model="checked"></up-switch> -->
                        <input type="nickname" class="weui-input" :value="state.info.userName" @blur="bindblur"
                            placeholder="请输入昵称" @input="bindinput" />
                    </template>
                </up-cell>
                <up-cell title="性别">
                    <template #right-icon style="display: flex;">
                        <up-input v-model="state.info.sex_text" class="weui-input" disabledColor="#ffffff" border="none"
                            disabled="true"></up-input>
                        <up-icon name="arrow-right" @click="state.showSheet = true"></up-icon>
                    </template>

                </up-cell>
                <up-cell title="所在地">
                    <template #right-icon style="display: flex;">
                        <up-input v-model="state.info.area_text" class="weui-input" disabled="true" disabledColor="#ffffff" border="none"></up-input>
                        <up-icon name="arrow-right" @click="showCity = true"></up-icon>
                    </template>
                </up-cell>
                <up-cell title="详细地址">
                    <template #right-icon style="display: flex;">
                        <up-input v-model="state.info.address"  disabledColor="#ffffff" class="weui-input" border="none"></up-input>
                    </template>
                </up-cell>
                <up-cell title="出生日期">
                    <template #right-icon style="display: flex;">
                        <up-input v-model="state.info.birthday" disabled="true" disabledColor="#ffffff" class="weui-input" border="none" @focus="state.showPick=true"></up-input>
                        <up-icon name="arrow-right" @click="state.showPick=true"></up-icon>
                    </template>
                </up-cell>
                <up-cell title="电子邮箱">
                    <template #right-icon style="display: flex;">
                        <up-input v-model="state.info.email" class="weui-input" border="none"></up-input>
                    </template>
                </up-cell>
            </up-cell-group>
        </view>
        <up-action-sheet :show="state.showSheet" :actions="state.actions" title="请选择性别" cancelText="取消"
            @close="state.showSheet = false" @select="sexSelect">
        </up-action-sheet>
        <u-city-select v-model="showCity" :areaCode="currentAreaCode" @city-change="cityChange"></u-city-select>
        <up-datetime-picker ref="datetimePickerRef" v-model="state.pickvalue" :formatter="formatter" :show="state.showPick" mode="date"
            @confirm="onPickConfirm" @cancel="state.showPick=false"></up-datetime-picker>
        <view class="footer-action">
            <view class="btn" @click="save">保存</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { onReady } from '@dcloudio/uni-app';
// #ifdef MP-WEIXIN
const fs = uni.getFileSystemManager()
// #endif
const { proxy } = getCurrentInstance()
const showCity = ref(false)
const datetimePickerRef = ref(null);
const state = reactive({
    info: {
        userName: "",
        avatar: "",
        sex: "",
        sex_text: "",
        birthday: "",
        email: "",
        proCode:"",
        cityCode:"",
        areaCode:"",
        address:"",
        area_text:""
    },
    showSheet: false,
    showPick: false,
    pickvalue: Date.now(),
    actions: [
        { name: '男', id: 1 },
        { name: '女', id: 2 }
    ],
    currentAreaCode:[]
})


function sexSelect(e) {
    console.log(e)
    state.info.sex = e.id
    state.info.sex_text = e.name
}

function onPickConfirm(e) {
    state.showPick = false
    let date = new Date(e.value);

    let formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;

    state.info.birthday = formattedDate
}
function bindinput(e) {
    console.log(e)
    state.info.userName = e.detail.value
}

function bindblur(e) {
    state.info.userName = e.detail.value
}
async function onChooseavatar(e) {
    const base = fs.readFileSync(e.detail.avatarUrl, 'base64', 0)
    const basePath = 'data:image/jpeg;base64,' + base

    const res = await proxy.request('/common/file/image', { image: basePath }, {
        method: 'POST'
    })

    console.log(res.data.data)
    state.info.avatar = res.data.data
}
const formatter = (type, value) => {
    if (type === 'year') {
        return `${value}年`;
    }
    if (type === 'month') {
        return `${value}月`;
    }
    if (type === 'day') {
        return `${value}日`;
    }
    return value;
};

function cityChange(e) {
    const {province,city,area}=e
    state.info.area_text= province.label + '-' + city.label + '-' + area.label;
    state.info.proCode=province.value+"0000"
    state.info.cityCode=city.value+"00"
    state.info.areaCode=area.value
}

async function getInfo() {
    const res = await proxy.request('/account/get/user/info', {}, { method: 'GET' })
    console.log(res)
    if (res.data.data.id) {
        state.info = res.data.data
        state.info.sex_text = state.info.sex == '1' ? '男' : '女'

        if(res.data.data.areaCode){
            const {proCode,proName,cityCode,cityName,areaCode,areaName}=res.data.data
            state.currentAreaCode=[proCode,cityCode,areaCode]
            state.info.area_text= proName + '-' + cityName + '-' + areaName;

            console.log( state.currentAreaCode,' state.currentAreaCode')
        }
    }
}
function save() {
    uni.showLoading()
    proxy.request('/account/updata/user/info', state.info).then(res => {
        if (res.code == 200) {
            uni.$u.toast('保存成功');
            setTimeout(() => {
                uni.hideLoading()
                uni.navigateBack()
            }, 1350)
        } else {
            uni.hideLoading()
            uni.$u.toast('保存失败');
        }
    })
}

onMounted(() => {
    getInfo()
})
onReady(() => {
    // 微信小程序需要用此写法
    datetimePickerRef.value.setFormatter(formatter);
})
</script>
<style lang="scss">
::v-deep .u-input__content__field-wrapper__field {
    text-align: right !important;
}
</style>
<style lang="scss" scoped>
page {
    background-color: #F5F5F5;
}

.main {
    .avatar-box {
        width: 100%;
        height: 100%;
        padding: 88rpx 0;

        .box {
            width: 140rpx;
            height: 140rpx;
            border-radius: 50%;
            margin: 0 auto;
            border-radius: 0rpx 0rpx 0rpx 0rpx;

            // border: 2rpx solid #CCCCCC;
            ::v-deep button {
                padding: 0;
                background: transparent;
                border: none !important;
                outline: none;
            }
            ::v-deep button:after{
                border: none;
            }

            .avatar {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
}

.weui-input {
    text-align: right;
}

.footer-action {
    margin-top: 100rpx;
    width: 100%;
    height: 100%;

    .btn {
        margin: 0 auto;
        width: 480rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        background: #F2CB51;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
}
</style>